<template>
	<view class="page pages">
		<view class="flex_be address" @click="to('/pages/shop/option/address/addressList')">
			<view style="flex-grow: 1;">
				<view class="add-text">
					<text v-show="addressinfo.is_default==1">{{$t('order.confirm.Mo')}}</text>
					{{addressinfo.province}}{{addressinfo.city}}{{addressinfo.area}}{{addressinfo.street}}{{addressinfo.address}}
				</view>
				<view class="add-info">{{addressinfo.name}} {{addressinfo.phone}}</view>
			</view>
			<uni-icons type="right" size="20" color="grey"></uni-icons>
		</view>
		<!-- <view class="flex_be address" @click="to('/pages/shop/shoppingCart/shoppingCart')">
			<view>合并下单</view>
			<uni-icons type="right" size="20" color="grey"></uni-icons>
		</view> -->
		<view class="order" v-for="item in product" :key="item.first_id">
			<view class="flex_be">
				<view style="font-weight: bold;">
					<uni-icons type="person-filled" size="20" color="#00CACC"></uni-icons>
					<text style="margin: 0 10rpx;">{{$t('order.confirm.Brand')}}</text>
					<uni-icons type="right" color="grey"></uni-icons>
				</view>
			</view>
			<view class="flex order-good">
				<view class="flex_ce og-image">
					<image :src="item.mainimg" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="flex_co og-info" style="padding: 5rpx 0;">
					<view>
						<view>{{item.name}}</view>
						<view class="flex_be" style="color: gray;margin-top: 5rpx;">
							<view>{{item.spec_sku_name}}</view>
							<view>{{$t('order.confirm.Num')}}{{item.nums}}</view>
						</view>
					</view>
					<view style="font-weight: bold;">￥{{item.money}}</view>
				</view>
			</view>
			<view class="flex_be" style="margin-top: 10rpx;">
				<view>{{(item.expinfo.name).slice(0,-1)}}</view>
				<view style="color: grey;margin-right: 20rpx;">￥{{(item.expinfo.money*1).toFixed(2)}}</view>
			</view>
		<!-- 	<view class="flex_be" style="margin-top: 10rpx;" @click="openCoupon(item)">
				<view>{{$t('order.confirm.Quan')}}</view>
				<view style="color: grey;">
					<text style="color: red;">{{$t('order.confirm.Jian')}}￥{{(item.couponmoney*1).toFixed(2)}}</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</view> -->
		</view>
		<textarea v-model="textarea" :placeholder="$t('order.confirm.Order')"></textarea>
		<view class="flex_be pay">
			<view class="pay-text">
				<view>{{$t('order.confirm.Gong')}}{{product.length}} {{$t('order.confirm.Piece')}}|
					{{$t('order.confirm.Amount')}}<text>￥{{allrealmoney}}</text></view>
				<view v-if="totalOffer!=0">{{$t('order.confirm.Preferential')}}￥{{totalOffer.toFixed(2)}}
					{{$t('order.confirm.Detail')}}<uni-icons type="top" size="12" @click="openPopup"></uni-icons></view>
			</view>
			<view class="pay-btn" @click="openDetail">{{$t('order.confirm.Check')}}</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="flex_be popup-title">
					<view class="flex">
						<view style="margin-left: 10rpx;">{{$t('order.confirm.Detail')}}</view>
					</view>
					<uni-icons type="closeempty" color="grey" @click="closePopup"></uni-icons>
				</view>
				<view class="popup-detail">
					<view class="flex_be" style="margin-top: 40rpx;">
						<view style="font-size: 34rpx;font-weight: bold;">{{$t('order.confirm.All')}}</view>
						<view style="color: crimson;">￥{{totalOffer.toFixed(2)}}</view>
					</view>
					<view class="flex_be" style="margin-top: 40rpx;">
						<view>{{$t('order.confirm.Money')}}</view>
						<view>￥{{allmoney}}</view>
					</view>
					<view class="flex_be">
						<view>{{$t('order.confirm.Freight')}}</view>
						<view>￥{{totalCosts.toFixed(2)}}</view>
					</view>
				</view>
				<view class="flex_be pay">
					<view class="pay-text">
						<view>{{$t('order.confirm.One')}} | {{$t('order.confirm.Amount')}}<text>￥{{allrealmoney}}</text>
						</view>
						<view>{{$t('order.confirm.Preferentials')}}￥{{totalOffer.toFixed(2)}}
							{{$t('order.confirm.Detail')}}<uni-icons type="bottom" size="12"
								@click="closePopup"></uni-icons></view>
					</view>
					<view class="pay-btn" @click="openDetail">{{$t('order.confirm.Submit')}}</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="coupon" type="bottom">
			<view class="coupon">
				<view class="flex_be" style="font-size: 36rpx;">
					<view></view>
					<view>{{$t('order.confirm.Can')}}</view>
					<uni-icons type="closeempty" color="grey" @click="closeCoupon"></uni-icons>
				</view>
				<view class="contant" v-if="couponList.length!=0">
					<view style="height: 700rpx;overflow: auto;">
						<view class="coupon_item" v-for="(item,index) in couponList" :key="item.id">
							<view class="coupon_content">
								<view class="coupon_info">
									<view class="coupon_type">{{item.cate_name}}</view>
									<view class="coupon_title">{{item.title}}</view>
									<view class="coupon_time">{{item.add_time}} - {{item.validity}}</view>
								</view>
								<view class="coupon_money">
									<view>
										<text>￥</text>
										<text>{{(item.money*1).toFixed(2)}}</text>
									</view>
									<view v-show="(item.con_money*1).toFixed(0)>0">{{item.name}}</view>
									<view @click="useCoupon(item,couponId.indexOf(item.id))">
										{{couponId.indexOf(item.id)==-1?$t('order.confirm.Use'):$t('order.confirm.Already')}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="coupon_btn" @click="couponClick">{{$t('order.confirm.Sure')}}</view>
				</view>
				<view class="no_list" v-else>
					<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/car.png" :text="$t('general.No')">
					</u-empty>
				</view>
			</view>
		</uni-popup>
		<uni-transition mode-class="fade" :show="payinfoShow" class="mask" :duration="200">
			<view class="mask_container">
				<view class="mask_title">
					{{$t('order.confirm.Pay')}}
				</view>
				<input type="password" :placeholder="$t('order.confirm.Passwodr')" v-model="payinfo.payPassword">
				<view class="mask_btn">
					<view class="cancel" @tap="cancelOrder">
						{{$t('order.confirm.Cancel')}}
					</view>
					<view class="confirm" @tap="payOrder">
						{{$t('order.confirm.Check')}}￥{{payinfo.money}}
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import {
		orderSubmit,
		orderCreate,
		orderPayinfo,
		orderPay
	} from '@/api/api.js'
	export default {
		data() {
			return {
				info: {},
				idStr: '',
				addressinfo: {},
				product: [],
				allmoney: null,
				allrealmoney: null,
				textarea: '',
				payinfoShow: false,
				payinfo: {},
				couponList: [],
				coupon_id: [],
				couponName: '',
				couponId: [],
				totalOffer: 0, // 总优惠
				totalCosts: 0 //总运费
			};
		},
		onLoad(option) {
			if (!!option.info) {
				this.info = JSON.parse(option.info)
				this.orderSubmit()
			} else if (!!option.idStr) {
				this.info.cartids = option.idStr
				this.orderSubmit()
			}
			this.info.couponNum = 0
		},
		onShow() {
			this.orderSubmit(),
				uni.setNavigationBarTitle({
					title: this.$t('list.Sure')
				})
		},
		methods: {
			to(path) {
				uni.navigateTo({
					url: path
				})
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			openCoupon(item) {
				this.$refs.coupon.open()
				this.couponList = item.coupon
				this.couponName = item.sku_id
				this.couponId = []
			},
			closeCoupon() {
				this.$refs.coupon.close()
			},
			// 确认订单页
			orderSubmit() {
				orderSubmit({
					token: uni.getStorageSync('token'),
					good_id: this.info.good_id || '',
					sku_id: this.info.sku_id || '',
					nums: this.info.num || '',
					cartids: this.info.cartids || '',
					addrid: this.info.addrid || '',
					coupon_id: this.coupon_id
				}).then(res => {
					this.addressinfo = res.data.data.addressinfo
					this.product = res.data.data.product
					this.allmoney = res.data.data.allmoney
					this.allrealmoney = res.data.data.allrealmoney
					this.coupon_id = []
					this.totalCosts = 0
					this.totalOffer = 0
					this.product.forEach((item, index) => {
						let arr = {}
						let name = item.sku_id
						arr[name] = item.coupon_id
						this.coupon_id.push(arr)
						if (item.couponmoney == undefined) {
							item.couponmoney = 0
						}
						this.totalOffer = this.totalOffer + (item.couponmoney * 1)
						this.totalCosts = this.totalCosts + (item.expinfo.money * 1)
					})
				})
			},
			useCoupon(item, num) {
				if (num == -1) {
					this.couponId.push(item.id)
				} else {
					this.couponId.pop(num, 1)
				}
			},
			couponClick() {
				this.closeCoupon()
				this.coupon_id.forEach(i => {
					if (Object.keys(i) == this.couponName) {
						i[this.couponName] = this.couponId
					}
				})
				this.orderSubmit()
			},
			// 提交订单
			openDetail(detail) {
				if (!this.addressinfo.id) {
					uni.showToast({
						title: this.$t('otherAdd.chooes'),
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/shop/option/address/addressList"
						})
					}, 600)
				} else {
					this.closePopup()
					orderCreate({
						token: uni.getStorageSync('token'),
						cartids: this.info.cartids,
						good_id: this.info.good_id,
						sku_id: this.info.sku_id,
						nums: this.info.num,
						addrid: this.addressinfo.id,
						usernote: this.textarea,
						coupon_id: this.coupon_id
					}).then(res => {
						this.orderPayinfo(res.data.data.ordid)
					})
				}
			},
			orderPayinfo(ordid) {
				orderPayinfo({
					token: uni.getStorageSync('token'),
					ordid: ordid,
					pagetype: 2
				}).then(res => {
					this.payinfo = res.data.data
					this.payinfoShow = true
				})
			},
			cancelOrder() {
				this.payinfoShow = false
				uni.redirectTo({
					url: "/pages/shop/order/orderList?key=1"
				})
			},
			payOrder() {
				orderPay({
					token: uni.getStorageSync('token'),
					ordid: this.payinfo.ordid,
					security_password: this.payinfo.payPassword
				}).then(res => {
					this.payinfoShow = false
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=2"
						})
					}, 600)
				})
			}
		}
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.flex_ce {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex_be {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex_co {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.page {
		background-color: #F4F3F8;
		min-height: 100vh;
		padding: 1rpx 0 200rpx 0;
	}

	.address {
		margin: 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		border-radius: 5rpx;

		.add-text {
			font-size: 34rpx;
			font-weight: bold;

			&>text {
				font-size: 24rpx;
				background-color: #817F8C;
				color: #fff;
				font-weight: normal;
				padding: 8rpx 10rpx;
				border-radius: 5rpx;
				margin-right: 10rpx;
			}
		}

		.add-info {
			font-size: 30rpx;
			margin-top: 10rpx;
		}

		.a-text {
			color: #817F8C;
			margin: 20rpx 0;
			font-size: 30rpx;
		}
	}

	.order {
		margin: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 5rpx;

		.order-jia {
			font-size: 26rpx;
			background-color: #F4F3F8;
			padding: 0 10rpx;
			border-radius: 30rpx;
		}

		.order-good {
			margin: 20rpx 0;

			.og-image {
				width: 240rpx;
				height: 240rpx;
				border: #F4F3F8 1px solid;
				border-radius: 5rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.og-info {
				height: 240rpx;
				flex-grow: 1;
			}

			.og-type {
				&>view {
					color: crimson;
					border: 1px crimson solid;
					font-size: 24rpx;
					padding: 0 10rpx;
					margin: 0 10rpx 10rpx 0;
				}
			}
		}

		.order-price {
			text-align: right;
			margin: 40rpx 0 20rpx 0;

			&>text {
				font-weight: bold;
			}
		}
	}

	textarea {
		background-color: #fff;
		width: calc(100vw - 40rpx);
		padding: 20rpx;
		margin: 20rpx;
		box-sizing: border-box;
	}

	.pay {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx;
		border-top: #F4F3F8 1px solid;

		.pay-text {
			font-size: 28rpx;

			text {
				font-size: 40rpx;
				font-weight: bold;
				color: crimson;
			}
		}

		.pay-btn {
			background-color: #00CACC;
			color: #fff;
			padding: 15rpx 40rpx;
			border-radius: 10rpx;
		}
	}

	.popup {
		height: 60vh;
		overflow: auto;
		background-color: #fff;
		padding: 20rpx 40rpx 100rpx;

		.popup-title {
			height: 100rpx;
			border-bottom: #F4F3F8 1px solid;
		}

		.popup-detail {
			padding: 0 20rpx;

			&>view {
				height: 60rpx;
				font-size: 28rpx;
			}
		}
	}

	.coupon {
		height: 60vh;
		overflow: auto;
		background-color: #fff;
		padding: 20rpx 40rpx 100rpx;

		.contant {
			width: 100%;
			flex: 1;
			overflow: auto;

			.coupon_item {
				margin-top: 30rpx;

				.coupon_content {
					display: flex;
					width: 100%;
					height: 220rpx;
					background-color: #2a2c3c;
					color: #d1d2e1;
					border-radius: 6rpx;
					box-shadow: 0 2px 12px -2rpx #000;

					.coupon_info {
						flex: 1;
						border-right: 2rpx dashed #888;
						position: relative;

						.coupon_type {
							// background: #44455c;
							width: 80rpx;
							height: 30rpx;
							font-size: 24rpx;
							color: #00feff;
							line-height: 30rpx;
							text-align: center;
						}

						.coupon_title {
							font-size: 28rpx;
							line-height: 28rpx;
							margin-top: 40rpx;
							padding-left: 20rpx;
							font-weight: 600;
						}

						.coupon_time,
						.coupon_use {
							font-size: 20rpx;
							line-height: 20rpx;
							margin-top: 70rpx;
							padding-left: 20rpx;
						}

						.coupon_txt {
							width: 100%;
							height: 40rpx;
							font-size: 20rpx;
							line-height: 40rpx;
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							color: #8f919d;
							padding: 0 20rpx;
						}
					}

					.coupon_money {
						width: 200rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 40rpx 0 30rpx;

						uni-view:nth-child(1) {
							color: #00feff;
							font-size: 48rpx;
							line-height: 48rpx;
							font-weight: 600;

							uni-text:nth-child(1) {
								font-size: 24rpx;
								line-height: 24rpx;
								padding-right: 6rpx;
							}
						}

						uni-view:nth-child(2) {
							font-size: 20rpx;
							line-height: 20rpx;
							margin: 20rpx 0;
						}

						uni-view:nth-child(3) {
							font-size: 28rpx;
							width: 134rpx;
							height: 44rpx;
							text-align: center;
							line-height: 40rpx;
							border: 2rpx solid #c3c4cb;
						}
					}
				}

				.coupon_rule {
					padding: 20rpx;
					background: #2b2c3c;
					color: #aaa;
					font-size: 24rpx;
					border-radius: 0 0 6rpx 6rpx;
				}
			}

			.coupon_btn {
				background-color: #00CACC;
				position: absolute;
				left: 40rpx;
				right: 40rpx;
				bottom: 40rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-weight: bold;
				color: #fff;
			}
		}
	}

	.mask {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;

		.mask_container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 640rpx;
			height: 240rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 10rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.5);
			padding: 20rpx 70rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.mask_title {
				font-size: 32rpx;
				color: #666;
				text-align: center;
			}

			input {
				border-bottom: #666 1px solid;
				padding: 5rpx 10rpx;
				font-size: 34rpx;
				letter-spacing: 3px;
			}

			.mask_btn {
				display: flex;
				justify-content: space-between;
				color: #01c2c3;
				font-size: 30rpx;
				line-height: 32rpx;
			}
		}
	}
</style>